<template lang="pug">
  div
    //section.setBox
    //  h2 账单设置
    //  .formGroups
    //      form-box(
    //        ref="basicForm"
    //        :fields="basicFields"
    //        :showBtns="true"
    //        :showCancel="false"
    //        :submitting="baseSubmitting"
    //        :submitHandle="baseSubmitHandle"
    //        labelWidth="220px"
    //        :layoutCol="{ sm: 24, md: 24, lg: 24 }"
    //      )
    section.setBox
      h2 支付设置
      .formGroups
        div.table-empty
          s-table(
            ref="table"
            :reqUrl="reqUrl"
            reqMethod="GET"
            :column="tableObj.column"
            :filterProps="{ showBtns: false, fields: [] }"
          )
            .table-operator(slot="table-operator")
              el-button.gradientVertical(size="large" round @click="actionHandle({}, 'add')") 添加

            template(slot="accountType" slot-scope="text, scope")
              span {{text | stautsFilter('name')}}
            template(slot="action" slot-scope="text, scope")
              template
                el-link(@click="actionHandle(scope, 'edit')" type="primary") 修改
              el-popconfirm(
                title="您确认要删除该项?"
                @confirm="() => actionHandle(scope, 'delete')"
                @onConfirm="() => actionHandle(scope, 'delete')"
              )
                el-link(slot="reference" type="danger") 删除
    add-drawer(:visible.sync="addObj.visible" :info="addObj.info" :types="addObj.type" @getList="() => refreshTable(true)")
</template>
<script>
import AddDrawer from './addDrawer'
import { setFinanceConfig, getFinanceConfig, delFinAccount } from './api.js'
import { columnConfig, statusList } from './config.js'
export default {
  components: {
    AddDrawer
  },
  filters: {
    stautsFilter (val, key) {
      const status = statusList.find((x) => x.id === val?.toString()) || {}
      return status[key] || ''
    }
  },
  data () {
    return {
      baseConfig: {},
      baseSubmitting: false,

      tableObj: {
        column: columnConfig
      },
      addObj: {
        visible: false,
        type: 'add',
        info: {}
      }
    }
  },
  computed: {
    reqUrl () {
      return 'crm/fin/account/list'
    },
    basicFields () {
      const { baseConfig } = this
      console.log(baseConfig)
      return [
        {
          key: 'defaultPayCircleName',
          label: '收费单据号前缀',
          rules: [{ required: true, message: '请输入' }],
          initialValue: baseConfig.defaultPayCircleName
        },
        {
          key: 'defaultPayOrderNote',
          label: '默认单据条款',
          rules: [{ required: true, message: '请输入' }],
          initialValue: baseConfig.defaultPayOrderNote
        },
        {
          key: 'defaultPayOrderFootnote',
          label: '收费单据脚注',
          rules: [{ required: true, message: '请输入' }],
          initialValue: baseConfig.defaultPayOrderFootnote
        }
      ]
    }
  },
  created () {
    this.getBaseConfig()
  },
  methods: {
    refreshTable (flag = false) {
      this.$refs.table.refresh(flag)
    },
    // 基础设置
    baseSubmitHandle (values) {
      this.baseSubmitting = true
      setFinanceConfig({ ...values })
        .then((res) => {
          console.log(res)
          if (res) {
            this.$message.success('设置成功！')
          }
        })
        .finally(() => {
          this.baseSubmitting = false
        })
    },

    getBaseConfig () {
      getFinanceConfig().then((res) => {
        console.log(res)
        if (res.content.length > 0) {
          this.baseConfig = res.content[0]
        }
      })
    },
    actionHandle (row, type) {
      if (type === 'delete') {
        // 删除
        this.delFinAccount(row.id)
        return
      }
      this.addObj = {
        type,
        info: row,
        visible: true
      }
    },

    delFinAccount (id) {
      delFinAccount(id).then((res) => {
        console.log(res)
        this.refreshTable()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.formGroups {
  margin-left: 30px;
}
</style>
